import $ from 'jquery';
import layer from "@/common/layer";
import util from "@/common/util";

var turnplate = {
    restaraunts: [],				//大转盘奖品名称
    colors: [],					//大转盘奖品区块对应背景颜色
    outsideRadius: 178,			//大转盘外圆的半径
    textRadius: 150,				//大转盘奖品位置距离圆心的距离
    insideRadius: 64,			//大转盘内圆的半径
    startAngle: 0,				//开始角度
    randomRate: [],              //控制获奖率，百分制(相加需等于100%)，对应restaraunts(顺序需要保持一致)，
    bRotate: false				//false:停止;ture:旋转
};

//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["流量卡30M", "充值手机费5元", "感谢参与", "感谢参与", "kindle经典版", "iPad Pro", "小米手环3", "驱蚊手环"];
turnplate.colors = ["#c17bb2", "#ec6e4d", "#f0934f", "#f3a433", "#86a229", "#a2bf33", "#4cb6eb", "#a487bd"];

export default {
    pointer: function () {
        if (turnplate.bRotate) return;
        turnplate.bRotate = !turnplate.bRotate;
        var openid = sessionStorage.getItem("openid")
        console.log("openid的值:" + openid)
        var that = this
        let res = async function () {
            let data = await util.rjax({
                url: '/prize/round?openId=' + openid,
                type: "POST"
            }).catch((e) => {
                if (e.data.code === 10011044) {//抽奖超过三次，不能抽奖
                    layer.open({
                        content: e.data.msg,
                        btn: "好的"
                    })
                    return
                }
            })
            if (data) {
                that.rotateFn(data.prizeId, turnplate.restaraunts[parseInt(data.prizeId) - 1], data.result);
            }
        }
        res()
        //this.rotateFn(rotateData.prizeId, rotateData.text, rotateData.result);
        //获取随机数(奖品个数范围内)
        // var item = 1
        // var data = { "result": "流量卡30M", "id": "" };
        //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
        //this.rotateFn(item, turnplate.restaraunts[item - 1], data);
    },
    gamestate: function (a, b, c) {
        var week = new Date().getDay();
        var h = new Date().getHours().toString();
        var m = new Date().getMinutes().toString();
        var s = new Date().getSeconds().toString();
        if (h < 10) {
            h = "0" + h;
        }
        if (m < 10) {
            m = "0" + m;
        }
        if (s < 10) {
            s = "0" + s;
        }
        var date = h + m + s;
        if (week == a) {
            if (b <= date && date <= c) {
                this.pointer()
            } else {
                layer.open({
                    content: '活动每周三10点开抢,持续一分钟',
                    btn: '好的'
                })
            }
        } else {
            layer.open({
                content: '活动每周三10点开抢',
                btn: '好的'
            })
        }
    },
    //旋转转盘 item:奖品位置; txt：提示语;
    rotateFn: function (item, txt, result) {
        var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
        if (angles < 270) {
            angles = 270 - angles;
        } else {
            angles = 360 - angles + 270;
        }
        $('#wheelcanvas').stopRotate();
        $('#wheelcanvas').rotate({
            angle: 0,
            animateTo: angles + 1800,
            duration: 8000,
            callback: function () {
                //中奖页面与谢谢参与页面弹窗
                if (txt.indexOf("感谢参与") >= 0) {
                    layer.open({
                        content: "感谢参与",
                        btn: '好的'
                    })
                } else {//中奖
                    layer.open({
                        content: "恭喜您，抽中了" + result,
                        btn: '好的',
                        yes: function () {
                            window.location.href = `./improveinfo.html`;
                        }
                    })


                }
                turnplate.bRotate = !turnplate.bRotate;
            }
        });
    },
    drawRouletteWheel: function () {
        var canvas = document.getElementById("wheelcanvas");
        if (canvas.getContext) {
            //根据奖品个数计算圆周角度
            var arc = Math.PI / (turnplate.restaraunts.length / 2);
            var ctx = canvas.getContext("2d");
            //在给定矩形内清空一个矩形
            ctx.clearRect(0, 0, 422, 422);
            //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
            ctx.strokeStyle = "#FFBE04";
            //font 属性设置或返回画布上文本内容的当前字体属性
            ctx.font = '19px Microsoft YaHei';
            for (var i = 0; i < turnplate.restaraunts.length; i++) {
                var angle = turnplate.startAngle + i * arc;
                ctx.fillStyle = turnplate.colors[i];
                ctx.beginPath();
                //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
                ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                //锁画布(为了保存之前的画布状态)
                ctx.save();

                //----绘制奖品开始----
                ctx.fillStyle = "#fff";
                var text = turnplate.restaraunts[i];
                var line_height = 17;
                //translate方法重新映射画布上的 (0,0) 位置
                ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                //rotate方法旋转当前的绘图
                ctx.rotate(angle + arc / 2 + Math.PI / 2);

                /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                if (text.indexOf("M") > 0) {//流量包
                    var texts = text.split("M");
                    for (var j = 0; j < texts.length; j++) {
                        ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
                        if (j == 0) {
                            ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
                        } else {
                            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                        }
                    }
                } else if (text.indexOf("M") == -1 && text.length > 6) {//奖品名称长度超过一定范围 
                    text = text.substring(0, 6) + "||" + text.substring(6);
                    var texts = text.split("||");
                    for (var j = 0; j < texts.length; j++) {
                        ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                    }
                } else {
                    //在画布上绘制填色的文本。文本的默认颜色是黑色
                    //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                }

                //把当前画布返回（调整）到上一个save()状态之前 
                ctx.restore();
                //----绘制奖品结束----
            }
        }
    }
}

var Wilq32
for (var supportedCSS, styles = document.getElementsByTagName("head")[0].style, toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "), a = 0; a < toCheck.length; a++)void 0 !== styles[toCheck[a]] && (supportedCSS = toCheck[a])
var IE = eval('"v"=="\x0B"')
$.fn.extend({
    rotate: function (t) {
        if (0 !== this.length && void 0 !== t) {
            "number" == typeof t && (t = { angle: t })
            for (var i = [], e = 0, s = this.length; s > e; e++) {
                var h = this.get(e)
                if (h.Wilq32 && h.Wilq32.PhotoEffect) h.Wilq32.PhotoEffect._handleRotation(t)
                else {
                    var a = $.extend(!0, {}, t), n = new Wilq32.PhotoEffect(h, a)._rootObj
                    i.push($(n))
                }
            } return i
        }
    }, getRotateAngle: function () {
        for (var t = [], i = 0, e = this.length; e > i; i++) {
            var s = this.get(i)
            s.Wilq32 && s.Wilq32.PhotoEffect && (t[i] = s.Wilq32.PhotoEffect._angle)
        } return t
    }, stopRotate: function () {
        for (var t = 0, i = this.length; i > t; t++) {
            var e = this.get(t)
            e.Wilq32 && e.Wilq32.PhotoEffect && clearTimeout(e.Wilq32.PhotoEffect._timer)
        }
    }
}), Wilq32 = window.Wilq32 || {}, Wilq32.PhotoEffect = function () {
    return supportedCSS ? function (t, i) { t.Wilq32 = { PhotoEffect: this }, this._img = this._rootObj = this._eventObj = t, this._handleRotation(i) } : function (t, i) {
        if (this._img = t, this._rootObj = document.createElement("span"), this._rootObj.style.display = "inline-block", this._rootObj.Wilq32 = { PhotoEffect: this }, t.parentNode.insertBefore(this._rootObj, t), t.complete) this._Loader(i)
        else {
            var e = this
            $(this._img).bind("load", function () { e._Loader(i) })
        }
    }
}(), Wilq32.PhotoEffect.prototype = {
    _setupParameters: function (t) { this._parameters = this._parameters || {}, "number" != typeof this._angle && (this._angle = 0), "number" == typeof t.angle && (this._angle = t.angle), this._parameters.animateTo = "number" == typeof t.animateTo ? t.animateTo : this._angle, this._parameters.step = t.step || this._parameters.step || null, this._parameters.easing = t.easing || this._parameters.easing || function (t, i, e, s, h) { return -s * ((i = i / h - 1) * i * i * i - 1) + e }, this._parameters.duration = t.duration || this._parameters.duration || 1e3, this._parameters.callback = t.callback || this._parameters.callback || function () { }, t.bind && t.bind != this._parameters.bind && this._BindEvents(t.bind) }, _handleRotation: function (t) { this._setupParameters(t), this._angle == this._parameters.animateTo ? this._rotate(this._angle) : this._animateStart() }, _BindEvents: function (t) {
        if (t && this._eventObj) {
            if (this._parameters.bind) {
                var i = this._parameters.bind
                for (var e in i) i.hasOwnProperty(e) && $(this._eventObj).unbind(e, i[e])
            } this._parameters.bind = t
            for (var e in t) t.hasOwnProperty(e) && $(this._eventObj).bind(e, t[e])
        }
    }, _Loader: function () {
        return IE ? function (t) {
            var i = this._img.width, e = this._img.height
            this._img.parentNode.removeChild(this._img), this._vimage = this.createVMLNode("image"), this._vimage.src = this._img.src, this._vimage.style.height = e + "px", this._vimage.style.width = i + "px", this._vimage.style.position = "absolute", this._vimage.style.top = "0px", this._vimage.style.left = "0px", this._container = this.createVMLNode("group"), this._container.style.width = i, this._container.style.height = e, this._container.style.position = "absolute", this._container.setAttribute("coordsize", i - 1 + "," + (e - 1)), this._container.appendChild(this._vimage), this._rootObj.appendChild(this._container), this._rootObj.style.position = "relative", this._rootObj.style.width = i + "px", this._rootObj.style.height = e + "px", this._rootObj.setAttribute("id", this._img.getAttribute("id")), this._rootObj.className = this._img.className, this._eventObj = this._rootObj, this._handleRotation(t)
        } : function (t) {
            this._rootObj.setAttribute("id", this._img.getAttribute("id")), this._rootObj.className = this._img.className, this._width = this._img.width, this._height = this._img.height, this._widthHalf = this._width / 2, this._heightHalf = this._height / 2
            var i = Math.sqrt(this._height * this._height + this._width * this._width)
            this._widthAdd = i - this._width, this._heightAdd = i - this._height, this._widthAddHalf = this._widthAdd / 2, this._heightAddHalf = this._heightAdd / 2, this._img.parentNode.removeChild(this._img), this._aspectW = (parseInt(this._img.style.width, 10) || this._width) / this._img.width, this._aspectH = (parseInt(this._img.style.height, 10) || this._height) / this._img.height, this._canvas = document.createElement("canvas"), this._canvas.setAttribute("width", this._width), this._canvas.style.position = "relative", this._canvas.style.left = -this._widthAddHalf + "px", this._canvas.style.top = -this._heightAddHalf + "px", this._canvas.Wilq32 = this._rootObj.Wilq32, this._rootObj.appendChild(this._canvas), this._rootObj.style.width = this._width + "px", this._rootObj.style.height = this._height + "px", this._eventObj = this._canvas, this._cnv = this._canvas.getContext("2d"), this._handleRotation(t)
        }
    }(), _animateStart: function () { this._timer && clearTimeout(this._timer), this._animateStartTime = +new Date, this._animateStartAngle = this._angle, this._animate() }, _animate: function () {
        var t = +new Date, i = t - this._animateStartTime > this._parameters.duration
        if (i && !this._parameters.animatedGif) clearTimeout(this._timer)
        else {
            if (this._canvas || this._vimage || this._img) {
                var e = this._parameters.easing(0, t - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration)
                this._rotate(~~(10 * e) / 10)
            } this._parameters.step && this._parameters.step(this._angle)
            var s = this
            this._timer = setTimeout(function () { s._animate.call(s) }, 10)
        } this._parameters.callback && i && (this._angle = this._parameters.animateTo, this._rotate(this._angle), this._parameters.callback.call(this._rootObj))
    }, _rotate: function () {
        var t = Math.PI / 180
        return IE ? function (t) { this._angle = t, this._container.style.rotation = t % 360 + "deg" } : supportedCSS ? function (t) { this._angle = t, this._img.style[supportedCSS] = "rotate(" + t % 360 + "deg)" } : function (i) { this._angle = i, i = i % 360 * t, this._canvas.width = this._width + this._widthAdd, this._canvas.height = this._height + this._heightAdd, this._cnv.translate(this._widthAddHalf, this._heightAddHalf), this._cnv.translate(this._widthHalf, this._heightHalf), this._cnv.rotate(i), this._cnv.translate(-this._widthHalf, -this._heightHalf), this._cnv.scale(this._aspectW, this._aspectH), this._cnv.drawImage(this._img, 0, 0) }
    }()
}, IE && (Wilq32.PhotoEffect.prototype.createVMLNode = function () {
    document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)")
    try { return !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"), function (t) { return document.createElement("<rvml:" + t + ' class="rvml">') } } catch (t) { return function (t) { return document.createElement("<" + t + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">') } }
}())
